<template>
  <view>
    <navbar>内边距</navbar>
    <view :class="c_card">
      <view :class="c_title1">规则</view>
	  <view class="b-b1"></view>
      <view class="c-999 mt-20">
        <span :class="c_strong">pt-xx(0~50):</span
        >{padding-top:(0~50)rpx;}/* 上内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">pl-xx(0~50):</span
        >{padding-left:(0~50)rpx;}/* 左内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">pr-xx(0~50):</span
        >{padding-right:(0~50)rpx;}/* 右内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">pt-xx(0~50):</span
        >{padding-bottom:(0~50)rpx;}/* 下内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">p-0-xx(0~50):</span
        >{padding-left:xx(0~50)rpx;padding-right:xx(0~50)rpx;}/* 左右内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">p-0-xx(0~50):</span
        >{padding-left:xx(0~50)rpx;padding-right:xx(0~50)rpx;}/* 上下内边距 */
      </view>
      <view class="c-999 mt-20">
        <span :class="c_strong">p-all-xx(0~50):</span
        >{padding:xx(0~50)rpx;}/* 四边内边距 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>class="<span class="fw-b c-red">pt-50</span>"</view>
          <view class="w-150 h-150 bg-f1 pt-50 c-fff mt-20">
            <view :class="c_box1">内容</view>
          </view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>class="<span class="fw-b c-red">pr-50</span>"</view>
          <view class="w-150 h-150 bg-f1 pr-50 c-fff">
            <view :class="c_box1">内容</view>
          </view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>class="<span class="fw-b c-red">pb-50</span>"</view>
          <view class="w-150 h-150 bg-f1 pb-50 c-fff">
            <view :class="c_box1">内容</view>
          </view>
        </view>
      </view>
	  <view class="pb-20 b-b1"></view>
      <view class="mt-20">
        <view>
          <view>class="<span class="fw-b c-red">p-0-20</span>"</view>
          <view class="w-150 h-150 bg-f1 p-0-20 c-fff">
            <view :class="c_box1">内容</view>
          </view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>class="<span class="fw-b c-red">p-20-0</span>"</view>
          <view class="w-150 h-150 bg-f1 p-20-0 c-fff mt-20">
            <view :class="c_box1">内容</view>
          </view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>class="<span class="fw-b c-red">p-all-20</span>"</view>
          <view class="w-150 h-150 bg-f1 p-all-20 c-fff mt-20">
            <view :class="c_box1">内容</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "padding",
  data() {
    return {
		c_box1:'h100 w100 dp-fc bg-999 b-2'
	};
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped></style>
